<template>
      <div id="goodslist">
            <page-title><span slot="pageName">订单列表</span></page-title>
                  <div class="box">
                        <!-- <el-button class="uploadGoods" type="" round @click="getProject">全部订单</el-button> -->
                        <el-button class="uploadGoods" type="" round @click="type = 1">待接单</el-button>
                        <el-button class="uploadGoods" type="success" round @click="type = 2">已报价</el-button>
                        <el-button class="uploadGoods" type="primary" round @click="type = 3">待支付定金</el-button>
                        <el-button class="uploadGoods" type="info" round @click="type = 4">待服务</el-button>
                        <el-button class="uploadGoods" type="" round @click="type = 5">服务中</el-button>
                        <el-button class="uploadGoods" type="primary"  round @click="type = 6">待结算</el-button>
                        <el-button class="uploadGoods"  type="success" round @click="type = 7">已完成</el-button>
                        <el-button class="uploadGoods"  type="danger" round @click="type = 8">已取消</el-button>
                  </div>
            <!-- 表格 -->
              <el-table
                  :data="tableData"
                  style="width: 100%"
                  border
                  stripe
                  :height="height"
                  align="center"
                  :row-class-name="tableRowClassName">
                        <el-table-column
                              prop="addtime"
                              align="center"
                              label="下单时间"
                              >
                        </el-table-column>
                        <el-table-column
                              prop="orderid"
                              align="center"
                              label="订单编号"
                              >
                              <template slot-scope="scope">
                                    <el-popover trigger="hover" placement="top">
                                    <p>订单编号: {{ scope.row.orderid }}</p>
                                    <div slot="reference" class="name-wrapper">
                                          <el-tag type="success" size="medium"  @click="CopyOrder(scope.row.orderid)">查看单号</el-tag>
                                    </div>
                                    </el-popover>
                              </template>
                        </el-table-column>

                        <el-table-column
                              prop="name"
                              align="center"
                              label="发布者">
                        </el-table-column>

                       

                        <el-table-column
                              
                              align="center"
                              label="联系方式">
                              <template slot-scope="scope">
                                    <el-popover trigger="hover" placement="top">
                                    <p>地址: {{ scope.row.nativenative }}{{ scope.row.address }}</p>
                                    <p>手机号码: {{ scope.row.phone }}</p>
                                    <div slot="reference" class="name-wrapper">
                                          <el-tag size="medium">查看</el-tag>
                                    </div>
                                    </el-popover>
                              </template>
                        </el-table-column>

                        <el-table-column
                              prop="orderprice"
                              align="center"
                              label="金额">
                        </el-table-column>

                        <el-table-column
                              prop="imprest"
                              align="center"
                              label="预付金">
                        </el-table-column>

                        <el-table-column
                              prop="navname"
                              align="center"
                              label="类目">
                              <template slot-scope="scope">
                                    <el-link type="primary">{{ scope.row.navname }}</el-link>
                              </template>
                        </el-table-column>

                        <el-table-column
                              prop="status"
                              align="center"
                              label="状态">
                              <template slot-scope="scope">
                                   <el-button :type=" scope.row.status | getType " size="mini" style="width:100px">
                                         {{ scope.row.status | getStatus }}
                                   </el-button>
                              </template>
                        </el-table-column>
                        <el-table-column  align="center" width="180px" label="操作">
                              <template slot-scope="scope">
                                    <el-button
                                    size="mini"
                                    type="success"
                                    @click="ShowInfo(scope.row)">详情</el-button>

                                    <el-button
                                    size="mini"
                                    type="danger"
                                    @click="editProject(scope.row)">操作</el-button>
                              </template>
                        </el-table-column>
                  </el-table>

                  <!-- 分页 -->
                  <div class="page">
                        <el-pagination
                        background
                        layout="prev, pager, next"
                        :page-size="pageSize"
                        :current-page="currentPage"
                        @current-change="pageChange"
                        :total="total">
                        </el-pagination>
                  </div>
                  
                  <master-info :DialogData="DialogData" :MasterData="MasterData" @update="getProject" ></master-info>
      </div>
</template>

<script>
      import PageTitle from '@/components/PageTitle'
      import MasterInfo from '@/components/dialog/MasterInfo'
      export default {
            data() {
                  return {
                        tableData: [],
                        DialogData: {
                              title: "",
                              show: false,
                              add: false
                        },
                        FormData: {
                             
                        },
                        allData: [],
                        type: "1",
                        currentPage: 1,
                        pageSize: 10,
                        total: 0,
                        MasterData: {},
                  }
            },
            components: {
                  PageTitle,
                  MasterInfo
            },
            computed: {
                  height() {
                        return this.$store.state.height; 
                  },
                  token() {
                        return this.$store.state.token
                  }
            },
            mounted () {
                  this.getProject();
            },
            filters: {
                  getStatus( val ) {
                        switch (val) {
                              case 1:
                              return "待接单"
                              case 2:
                              return "已报价"
                              case 3:
                              return "待支付定金"
                              case 4:
                              return "待师傅上门"
                              case 5:
                              return "服务中"
                              case 6:
                              return "待结算"
                              case 7:
                              return "已完成"
                              case 8:
                              return "客户取消"
                              
                        }
                  },
                  getType( val ) {
                        switch (val) {
                              case 1:
                              return "default"
                              case 2:
                              return "success"
                              case 3:
                              return "primary"
                              case 4:
                              return "info"
                              case 5:
                              return "default"
                              case 6:
                              return "primary"
                              case 7:
                              return "success"
                              case 8:
                              return "danger"
                        }
                  },
            },
            watch: {
                  type(newVal, oldVal) {
                        this.filterOrder( newVal )
                  },
            },
            methods: {
                  
            //      获取所有订单
                  async getProject( type ) {
                        // this.type = type ? type : "1"
                        let token = localStorage.miniToken 
                        let res = await this.$axios.post("/admin/order/index", { token, status: this.type, page: this.currentPage } )
                        console.log(res.data.data);
                        let code = res.data.code 
                        if (code == 200) {
                              this.tableData = res.data.data
                              this.total = this.tableData[0].count ? this.tableData[0].count : 0
                        }
                        
                  },

                  // 过滤订单
                  filterOrder( type ) {
                        this.type = type
                        this.getProject(type)
                  },
                  tableRowClassName({row, rowIndex}) {
                        if (rowIndex === 1) {
                              return 'warning-row';
                        } else if (rowIndex === 3) {
                              return 'success-row';
                        }
                              return '';
                  },
                  addProject() {
                        this.DialogData = {
                              title: "添加理疗项目",
                              show: true,
                              add: true
                        }
                        this.FormData = {
                              title: "",
                              score: ""
                        }
                  },
                  editProject( row ) {
                        this.$message.success("暂无任何操作")
                  },
                  pageChange( page ) {
                        this.currentPage = page
                  },
                  // 复制订单号
                  CopyOrder( str ) {
                        let save = e => {
                              e.clipboardData.setData("text/plain", str)
                              e.preventDefault()
                        }
                        document.addEventListener("copy", save)
                        document.execCommand("copy")
                        document.removeEventListener("copy", save)
                        this.$message.success("订单号已复制")
                  },

                  // 查看详情
                  async ShowInfo( order ) {
                        let res = await this.$axios.post("/admin/order/order", { orderid: order.orderid, token: this.token })
                        console.log(res);
                        let code = res.data.code
                        if (code == 200) {
                              let user = res.data.data
                              this.DialogData = {
                                    title: "师傅详情",
                                    show: true,
                              }
                              this.MasterData = {
                                    name: user.name,
                                    address: `${user.province}${user.city}${user.county}`,
                                    phone: user.phone,
                                    orderprice: user.orderprice,
                                    imprest: user.imprest,
                                    companyname: user.companyname,
                                    orderid: user.orderid
                              }
                        } else {
                              this.$message.error("暂无技工数据")
                        }
                        
                  },
            },
      }
</script>

<style lang="scss" scoped>
  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
  .btn {
        text-align: left;
        margin-top: 30px;
  }
  .addProject {
        float: right;
        margin: 10px 20px;
  }
    .box {
  width: 100%;
  text-align: left;
  padding-bottom: 30px;
}
.page {
      margin-top: 20px;
      text-align: right;
}
</style>